import { defineComponent, watch } from 'vue'
import MenuItem from '../layout/menu'
import NavHeader from '../layout/Nav'
import './index.scss'
import SystemTabs from '@/components/system-tabs/index.vue'
import { useRoute } from 'vue-router'
import { useTabsStore } from '@/store'

const HomePage = defineComponent({
	name: 'Home',
	component: {
		MenuItem,
		NavHeader
	},
	setup() {
		const route = useRoute()
		const tabsStore = useTabsStore()

		// 路由变化时添加标签页
		watch(
			() => route.path,
			() => {
				console.log(route)
				tabsStore.addTab(route)
			},
			{ immediate: true }
		)
		return {
			route
		}
	},
	render() {
		return (
			<div class='common-layout'>
				<el-container style='height:100%'>
					<el-aside width='200px'>
						<MenuItem />
					</el-aside>
					<el-container>
						<el-header>
							<NavHeader></NavHeader>
						</el-header>
						<el-container class='common-content'>
							<SystemTabs />
							<el-main style={{ background: '#fff', borderRadius: '10px' }}>
								<router-view>
									{/* {{
											default: (routerView: {Component: any}) => {
												// if (!this.route?.meta?.keepAlive) {
												// 	return <routerView.Component />
												// }
												return <KeepAlive include={['NoticeManage']}>
													<routerView.Component />
												</KeepAlive>
											}
										}} */}
								</router-view>
							</el-main>
						</el-container>
					</el-container>
				</el-container>
			</div>
		)
	}
})
export default HomePage
